<template>
  <Dialog
    :visible="previewDialogVisible"
    @close="hangleClosePreviewDialog"
    :destroy-on-close="true"
    :isPreview="true"
    width="800px"
    top="30vh"
    class="previewDialog"
  >
      <div class="content">
        <div class="left">
          <el-carousel
            v-if="previewForm.photos.length > 0"
            height="440px"
            direction="vertical"
            :autoplay="true"
          >
            <el-carousel-item v-for="photo in previewForm.photos" :key="photo.id">
              <img v-lazy="photo.url" :alt="photo.name" />
            </el-carousel-item>
          </el-carousel>

          <div class="tip" v-else>请上传图片</div>
        </div>
      </div>
  </Dialog>
</template>

<script lang="ts" setup>
import { computed, getCurrentInstance, onMounted, ref, watch } from "vue";

import Dialog from '@/components/common/Dialog.vue';

const props = defineProps(["previewDialogVisible", "previewForm"]);
const emits = defineEmits(["closePreviewDialog"]);

const hangleClosePreviewDialog = () => {
  emits("closePreviewDialog");
};
</script>

<style lang="less" scoped>
.previewDialog {
  // display: flex;
  // flex-direction: column;
  // align-items: center;
  padding: 0 50px;
  .content {
    display: flex;
    justify-content: space-between;

    height: 440px;
    font-size: 16px;
    // margin-bottom: 20px;

    .left,
    .right {
      flex: 1;
    }

    .left {
      // overflow: hidden;
      position: relative;
      box-sizing: border-box;
      border: 4px solid #2e9cfe;

      img {
        width: 100%;
        height: calc(100% - 8px);
        object-fit: cover;
      }
    }
  }
}
.tip {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 24px;
  color: #fff;
}

:deep(.el-carousel__indicators--vertical) {
  width: 40px;
  left: -60px;
}

// .el-carousel__item h3 {
//   color: #475669;
//   opacity: 0.75;
//   line-height: 200px;
//   margin: 0;
//   text-align: center;
// }

// .el-carousel__item:nth-child(2n) {
//   background-color: #99a9bf;
// }

// .el-carousel__item:nth-child(2n + 1) {
//   background-color: #d3dce6;
// }
</style>
